import { GrowlMessageType } from './../../../components/messageBox/growMeaageType';
import { MessageBoxService } from './../../../components/messageBox/messageBoxService';
import { BaseComponent } from './../../../components/baseComponent';
import { ShellIntegrationService } from './../../../services/shellIntegration';
import { employeesService } from './../../../services/employee';
import { Employee } from './../../../models/Employee';
import { Component, Input, Output, EventEmitter, ElementRef } from '@angular/core';
import { OperationLock, HandleExpectionErrorUseGrowMessage } from "../../../common/decorator/index";

@Component({
    selector: 'bracelet-binding',
    template: `
        <div class="setup-container" >
            <div fxLayout="row" class="title pct100 noshrink">
                <button (click)="back()" fxFlex="10%" fxLayoutAlign="center center"><i class="material-icons text-large">navigate_before</i></button>
                <div fxFlex="70%" fxLayoutAlign="center center">手环绑定</div>
                <button fxFlex="20%" class="btn-save pct20 text-xl" (click)="save()">保存</button>
            </div>
            <div class="padding">
                <div class="bind-info">员工姓名：{{employee&&employee.user.name}}</div>
                <div class="bind-info">员工号：{{employee&&employee.employeeNumber}}</div>
                <div class="bind-info">手环编码：
                    <md-input-container class="pct80" floatingPlaceholder="false">
                        <input type="text" md-input id="J_braceletNo" [(ngModel)]="braceletNo" placeholder="请将手环靠近读卡器进行录入"/>
                        <i class="material-icons icon-clear" (click)="braceletNo=''">clear</i>
                    </md-input-container>
                </div>
            </div>
        </div>
    `,
    styleUrls: ['./bracelet.scss']
})
export class BraceletBindingComponent extends BaseComponent {
    constructor(
        private shellIntegrationService: ShellIntegrationService,
        private element: ElementRef
    ) {
        super()
    }

    @Input() employees: Employee[];
    @Input() employee: Employee;
    @Output() changeEmployee = new EventEmitter<Employee | null>();

    braceletNo: string

    ngOnInit() {
        this.braceletNo = this.employee.extended && this.employee.extended.braceletNo
        const self = this;
        this.shellIntegrationService.onCardreaderData = (data) => {
            this.braceletNo = data;
        }
    }

    back() {
        this.changeEmployee.emit(null)
    }

    @OperationLock()
    @HandleExpectionErrorUseGrowMessage()
    async save() {
        const bindedEmployee = this.employees.find(employee => employee.extended && employee.extended.braceletNo == this.braceletNo)
        if (bindedEmployee) {
            throw new Error(`该手环已经绑定到${bindedEmployee.user.name}`)
        }
        if (!this.employee.extended) this.employee.extended = <any>{}
        this.employee.extended.braceletNo = this.braceletNo;
        const resEmployee = await employeesService.updateEmployee(this.employee);
        this.changeEmployee.emit(resEmployee);
        MessageBoxService.current.Growl(GrowlMessageType.Success, '保存成功');
        this.back();
    }

    ngOnDestroy() {
        this.shellIntegrationService.onCardreaderData = null;
        this.unsubscribeSubscribetions();
    }
}
